import React,{ useState } from 'react'
import { NavBar, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';


export default function YiLoginDian() {
  const navigate = useNavigate()
  const dh = JSON.parse(localStorage.getItem('dh'))
  
  
  const back = () => Toast.show({
        content: '点击了返回区域',
        duration: 1000,
    },navigate('/login'));


  const [fase, setFase] = useState(false)
  const faseButton = () => {
      setFase(!fase)
  }
  const getPhoneNumber = () => {
    if (!fase) {
        alert('请先同意隐私政策与用户协议')
        return
    }
  }

  return (
    <div style={{textAlign:'center'}}>
        <NavBar onBack={back}>一键登录</NavBar>
        
      <img style={{marginTop:'40%'}} width={'90px'} src='./dianxin.png' alt=''/>
      <div style={{margin:'20px 0',lineHeight:' 10px'}}>
        <p>{dh}</p>
        <p style={{color:'#BBBBBB',fontSize:'14px',fontWeight:'bold'}}>中国联通提供认证服务</p>
      </div>
      <span className={fase?'back1':'button_login_yjs'} onClick={()=>{ getPhoneNumber() }}>本机号码一键登录</span>
      <span className={fase?'button_login_yjss':'back1'} onClick={()=>{ navigate('/my') }}>本机号码一键登录</span>
      <div style={{display:'flex',justifyContent:'center', alignItems: 'center', marginTop: '30px'}}>
          <input 
              type='checkbox' 
              onChange={(ever)=>{faseButton(ever.target.checked)}}
              style={{ marginRight: '8px' }}
          />
          <p style={{fontSize:'12px'}}>
              登录及代表您同意<span style={{color:'#748EDD'}}>中国电信认证服务协议</span>，<span style={{color:'#748EDD'}}><u>《隐私<br/>政策》</u></span>与<span style={{color:'#748EDD'}}><u>《用户协议》</u></span>
              并授权XXX获取本手机号
          </p>
      </div>
    </div>
  )
}
